<template>
	<view>
		<view class="u-page" :style="pageStyle">
			<view class="codearea">
				<view class="title">商户码</view>
				<image :src="qrcode" mode="" />
				<view class="lens">
					<view class="len">单位名称： {{name}}</view>
					<view class="len">单位地址： {{address}}</view>
				</view>
			</view>
			<canvas style="width:561px; height:710px;position:absolute;position: absolute; z-index: -10; left: -99999px; top: 0;" canvas-id="canvas"></canvas>
			<canvas style="width:750px; height:1000px;position:absolute;position: absolute; z-index: -10; left: -99999px; top: 0;" canvas-id="canvas2"></canvas>
			<view class="tip">说明：上方框内为商户码打印范围，请自行打印张贴。</view>
			<view class="buttomBtn">
				<u-button text="保存二维码" type="primary" @click="saveQrcode()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import getLocation from '@/utils/getLocation.js'
	import { mapState, mapMutations } from 'vuex';
	export default {
		mixins: [getLocation],
		data() {
			return {
				pageStyle: '',
				qrcode: '',
				name: '',
				address: '',
			
			}
		},
		onLoad(options) {
			console.log(options)
			var vm = this;
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				});
			}
			vm.address = options.jydz;
			vm.name = options.name;
			vm.qrcode = vm.API_PREFIX + options.ewm;
			// debugger
			if (options.loadJSON) {
				vm.getAndLoad('申报的配置json', options.loadJSON, function (res) {
					vm.pageStyle = res.pageStyle || '';
				});
			}
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		methods: {
			...mapMutations(['setPosition']),
			saveQrcode2: function () {
				var vm = this;
				const ctx = uni.createCanvasContext('canvas');
				uni.showLoading({ title: '请稍后' });
				vm.downloadFile(vm.API_PREFIX + '/mobile/wxImages/shanghumaPrint.png').then(bg => {
					vm.downloadFile(vm.qrcode).then(qr => {
						ctx.drawImage(bg, 0, 0);

						ctx.drawImage(qr, 115, 185, 340, 340);
						ctx.setFontSize(21);
						ctx.setStrokeStyle('#000');
						ctx.fillText('单位名称：' + vm.name, 75, 555);
						ctx.fillText('单位地址：' + vm.address, 75, 598);
						ctx.draw();

						uni.hideLoading();

						uni.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            height: 710,
                            width: 561,
                            canvasId: 'canvas',
                            success: (response) => {
                                uni.saveImageToPhotosAlbum({
                                    filePath: response.tempFilePath,
                                    success: (response) => {
                                     uni.$u.toast('商户码已保存');
                                    },
                                    fail: (response) => {
                                     uni.openSetting({
                                        success: (response) => {
                                            if(!response.authSetting['scope.writePhotosAlbum']) {
                                                nui.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功，再次点击图片即可保存',
                                                    showCancel: false
                                                })
                                            } else {
                                                nui.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，无法保存',
                                                    showCancel: false
                                                })
                                            }
                                        }
                                     })
                                    }
                                })
                            },
                            fail: (response) => {
                                console.log(response);
                            }
                        }, this);

					});
				})
			},
			saveQrcode: function () {
				var vm = this;
				const ctx = uni.createCanvasContext('canvas2');
				uni.showLoading({ title: '请稍后' });
				
				vm.downloadFile(vm.API_PREFIX + '/mobile/wxImages/shanghumaPrint2.png').then(bg => {
					vm.downloadFile(vm.qrcode).then(qr => {
						ctx.drawImage(bg, 0, 0);
						ctx.drawImage(qr, 244, 365, 260, 260);
						ctx.setFontSize(21);
						ctx.setStrokeStyle('#000');
						ctx.fillText('单位名称：' + vm.name, 140, 688);
						ctx.fillText('单位地址：' + vm.address, 140, 688 + 43);
						ctx.draw(false, () => {
							setTimeout(() => {
								uni.hideLoading();
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									height: 1000,
									width: 750,
									canvasId: 'canvas2',
									success: (response) => {
										uni.saveImageToPhotosAlbum({
											filePath: response.tempFilePath,
											success: (response) => {
											uni.$u.toast('商户码已保存');
											},
											fail: (response) => {
											uni.openSetting({
												success: (response) => {
													if(!response.authSetting['scope.writePhotosAlbum']) {
														nui.showModal({
															title: '提示',
															content: '获取权限成功，再次点击图片即可保存',
															showCancel: false
														})
													} else {
														nui.showModal({
															title: '提示',
															content: '获取权限失败，无法保存',
															showCancel: false
														})
													}
												}
											})
											}
										})
									},
									fail: (response) => {
										console.log(response);
									}
								}, this);
							}, 800)
						});

					});
				})
			},
			downloadFile (url) {
				return new Promise(resovle => {
					wx.downloadFile({
							url: url,
							success: function (res) {
								if (res.statusCode === 200) {
									resovle(res.tempFilePath);
								}
							}
						});
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		height: 100vh;
		overflow: auto;
		background: url('#{$APIPATH}/mobile/wxImages/shanghuma.png') no-repeat;
		background-size: 100%;
		background-color: #f5f6f6;
	}

	.btn {
		margin: 30rpx 30rpx;
		width: 690rpx;
		height: 220rpx;
	}

	.codearea {
		background: #fff;
		margin: 30rpx;
		margin-top: 140rpx;
		border-radius: 30rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			font-size: 36rpx;
			text-align: center;
			margin-top: 30rpx;
		}
		image {
			width: 440rpx;
			height: 440rpx;
			margin: 40rpx 0;
		}
		.lens {
			align-self: flex-start;
			margin-bottom: 40rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
		}

	}

	.tip {
		color: #999999;
		font-size: 24rpx;
		margin: 0 50rpx;
	}
	
	.buttomBtn {
		position: fixed;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		bottom: 0;
	}
	.group-menus {
		background: #fff;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		.group-title {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
		}
		.menus {
			padding: 0 10rpx;
		}
		.btn {
			margin: unset;
			margin-bottom: 15rpx;
		}
	}
	
</style>